<template>
<div class="home">
    <el-row id="artList" type="flex" justify="space-around">
        <el-col :span="14">
            <el-card class="nav">
                <a>推荐</a>
                <a>关注</a>
                <a>热榜</a>
            </el-card>
            <!--		循环这个东东就可以了-->
            <el-row class="art-item" v-for="article in ArticleList" :key="article.id">
                <question-list-cell :article= article @initQuestionData="updateQuestion(page)">

                </question-list-cell>
            </el-row>
            <!--		分页组件-->
            <div class="block pagination">
                <el-pagination background="#f9f9f9" layout="prev, pager, next" :total="page.total" :page-size="page.size" @current-change="Onchange"></el-pagination>
            </div>
        </el-col>

        <el-col :span="9" class="hidden-sm-and-down" id="side">
            <!--		装饰组件-->
            <div class="item">
                <GroupWrite></GroupWrite>
            </div>
            <!--		标签组件-->
            <div class="item">
                <tag></tag>
            </div>
            <!--		友情链接组件-->
            <div class="item">
                <friend></friend>
            </div>
        </el-col>
    </el-row>
</div>
</template>

<script>
//引入组件
import friend from "../components/friend";
import tag from "../components/tag";
import GroupWrite from "../components/GropWrite";
import questionListCell from "../components/content/questionListCell";
//引入api,请求后台数据
import {
    fetchAllQuestion,
    search
} from "../api";

export default {
    name: "home",
    components: {
        friend,
        tag,
        GroupWrite,
        questionListCell
    },
    data() {
        return {
            //接收文章列表
            ArticleList: [],
            //分页的数据
            page: {
                current: 1,
                size: 5,
                total: 5
            }
        };
    },
    methods: {
        //更新主界面的问题列表
        updateQuestion(page) {
            fetchAllQuestion(page)
                .then(res => {
                    if (res.data.code == 200) {
                        console.log(res);
                        this.ArticleList = res.data.page.records;
                        this.page.total = res.data.page.total;
                        console.log(this.page.total);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //分页函数，传入当先的页数，更新页面数据
        Onchange(val) {
            console.log(`当前页: ${val}`);
            this.page.current = val;
            this.updateQuestion(this.page);
        }

    },

    //初始化主页数据
    mounted() {
        this.updateQuestion(this.page);
    },
    filters: {
        //自定义过滤器，控制长度
        ellipsis(value) {
            if (!value) return "";
            if (value.length > 50) {
                return value.slice(0, 50) + "...";
            }
            return value;
        }
    }
};
</script>

<style scoped>
#side .item {
    margin-bottom: 30px;
}

.btn-grop {
    margin-top: 5px;
}

.foot-icon i {
    margin-left: 5px;
    margin-right: 10px;
    text-decoration-color: #f56c6c;
    color: darkgrey;
}

.nav a {
    margin-right: 20px;
}

.nav a:hover {
    color: #409eff;
}

.art-item {
    position: relative;
}

img.tag {
    width: 16px;
    height: 16px;
}

.art-title {
    border-left: 3px solid #f56c6c;
    padding-left: 5px;
    cursor: pointer;
}

.art-title:hover {
    padding-left: 10px;
    color: #409eff;
}

.art-time {
    margin-right: 20px;
}

.art-body {
    display: flex;
    padding: 10px 0;
}

.side-img {
    height: 105px;
    width: 190px;
    overflow: hidden;
    margin-right: 10px;
}

img.art-banner {
    width: 100%;
    height: 100%;
    transition: all 0.6s;
}

img.art-banner:hover {
    transform: scale(1.4);
}

.side-abstract {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.art-abstract {
    flex: 1;
}

.art-more {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.art-more .view {
    color: #aaa;
}

h5 {
    font-size: 18px;
}

.pagination {
    background-color: #f9f9f9;
}
</style>
